<script lang="ts" setup>
  import { ref, watch,reactive } from "vue"
    import { type FormInstance, ElMessage, ElMessageBox,type FormRules } from "element-plus"
  import { getProjectList } from "@/api/project"
  import { usePagination1 } from "@/hooks/usePagination"
  import useTable from '@/hooks/useTable'
  import handle from './components/handle.vue'
    import CompanySelect from '@/components/CompanySelect/index.vue'
    import { useRouter } from 'vue-router'

  const loading = ref<boolean>(false)
  const { paginationData, handleCurrentChange, handleSizeChange } = usePagination1()
  const tableData = ref<any>([])
  const dialogVisible = ref<boolean>(false)
  const activeRow = ref<any>()
    const router = useRouter()
    const searchFormRef = ref<FormInstance | null>(null)
  const searchData = reactive<any>({

  })

  const getTableData = () => {
    loading.value = true
    // paginationData.pageSize = 20
    getProjectList({
      ...paginationData,
      ...searchData
    }).then((res: any) => {
      paginationData.total = res.totalCount
      tableData.value = res.data
    }).catch(() => {
      tableData.value = []
    }).finally(() => {
      loading.value = false
    })
  }

  const { handleSelectionChange,multipleSelection, handleBatchDelete, handleDelete } = useTable({getList:getTableData})

    //搜索操作
    const handleSearch = () => {
    paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
  }

  //重置搜索表单
  const resetSearch = () => {
    searchFormRef.value?.resetFields()
    handleSearch()
  }

  const handleUpdate = (row: any) => {
    // activeRow.value = row
    // dialogVisible.value = true
    router.push({path: '/project/projectDetail', query: {id:row.projectId}})
  }

  const handleAdd = () => {
    // activeRow.value = {}
    // dialogVisible.value = true

    router.push({path: '/project/projectDetail' })
  }

  //关闭操作框
  const closeHandle = () => {
    dialogVisible.value = false
  }

  //操作完成
  const successHandle = () => {
    dialogVisible.value = false
    getTableData()
  }
  watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <div class="title-wrapper">项目管理</div>
    <div class="page-main">
      <div shadow="never" class="search-wrapper" v-permission="['project-search']">
        <div class="search-main">
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="name" label="项目名称">
              <el-input v-model="searchData.name" placeholder="请输入项目名称" clearable />
            </el-form-item>
            <el-form-item prop="companyName" label="公司名称">
              <el-input style="width:150px;" v-model="searchData.companyName" placeholder="请输入公司名称" clearable />
            </el-form-item>
            <el-form-item prop="status" label="状态">
              <el-select style="width:150px;" clearable v-model="searchData.status" placeholder="请选择">
                <el-option label="洽谈中" :value="0"></el-option>
                <el-option label="进行中" :value="1"></el-option>
                <el-option label="已结束" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="settlementCycle" label="费用结算周期">
              <el-select style="width:200px;" clearable v-model="searchData.settlementCycle" placeholder="请选择">
                <el-option label="年月" :value="0"></el-option>
                <el-option label="季度" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>
      <div class="toolbar-wrapper">
        <el-button type="primary" v-permission="['project-add']" @click="handleAdd">新增</el-button>
      </div>

      <div v-loading="loading" class="table-wrapper">
        <el-table :data="tableData">
          
          <!-- <el-table-column sortable prop="projectId" label="序号" /> -->
          <el-table-column type="index" width="60" label="序号"  />
          <el-table-column sortable prop="name" label="名称" />

          
          <el-table-column sortable prop="projectLiaisonPersonName" label="项目对接人" />
          <el-table-column sortable prop="contactPersonMobile" label="项目对接人电话" />
          <el-table-column sortable prop="settlementTypeName" label="费用结算方式" />
          <el-table-column sortable prop="settlementCycleName" label="费用结算周期" />
          
          <el-table-column sortable prop="projectLeaderName" label="项目负责人" />
          <el-table-column sortable prop="ourCompany" label="我方公司" />
          
          

          <el-table-column sortable prop="contractName" label="合同名称" />
          <el-table-column sortable prop="requestPayNum" label="合同内请款次数" />
          <!-- <el-table-column sortable prop="statusName" label="合同到期日期"  /> -->
          <el-table-column sortable prop="statusName" label="状态" />
          <el-table-column sortable prop="createTime" label="创建时间" />

          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" v-permission="['project-edit']" text size="small"
                @click="handleUpdate(scope.row)">修改</el-button>
              <!-- v-permission="['project-del']" -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
          :total="paginationData.total" :page-size="paginationData.pageSize" :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>

  <handle v-if="dialogVisible" title="新增/编辑产品系列" :data="activeRow" @success="successHandle" @cancel="closeHandle" />
</template>

<style lang="scss" scoped>

</style>
